<template>
  <div>
    姓名：<input v-model="name" type="text" /><br />
    年龄：<input v-model="age" type="text" /><br />
    身高：<input v-model="height" type="text" />(米)<br />
    体重：<input v-model="weight" type="text" />(公斤)<br />
    病史：<input v-model="des" type="text" /><br />
    <button @click="dis">诊断</button><br />
    <p id="inp"></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      age: '',
      height: '',
      weight: '',
      des: '无',
      health: ''
    }
  },
  created() {
    // this.dis()
  },
  mounted() {
    // this.fn()
  },
  // methods: {
  //   dis() {
  //     if (this.weight / (this.height * this.height) <= 18.5)
  //       this.health = '过轻'
  //     if (
  //       this.weight / (this.height * this.height) <= 29.9 &&
  //       this.weight / (this.height * this.height) > 18.5
  //     )
  //       this.health = '正常'
  //     if (this.weight / (this.height * this.height) > 29.9) this.health = '肥胖'
  //   },
  //   fn() {
  //     setTimeout(function () {
  //       document.querySelector('#inp').innerHTML = `${this.health}`
  //     }, 15000)
  //   }
  // }
  methods: {
    dis() {
      console.log(this.weight / (this.height * this.height))
      if (this.weight / (this.height * this.height) <= 18.5) {
        console.log('1')
        this.health = '体重过轻'
        this.fn()
      }
      if (
        this.weight / (this.height * this.height) <= 29.9 &&
        this.weight / (this.height * this.height) > 18.5
      ) {
        console.log('2')
        this.health = '正常'
        this.fn()
      }
      if (this.weight / (this.height * this.height) > 29.9) {
        console.log('3')
        this.health = '肥胖'
        this.fn()
      }
    },
    fn() {
      document.querySelector('#inp').innerHTML = `${this.health}`
    }
  }
}
</script>

<style></style>
